<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>{{article.title}}</span>
        </div>

        <div class="text item">
            {{article.detail}}
        </div>
    </el-card>
    <el-button type="text" @click="dialogFormVisible = true">添加评论</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="comment">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="comment.detail" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addComment">确 定</el-button>
        </div>
    </el-dialog>


    <!--评论列表-->
 <el-row style="height: 20px"></el-row>
    <el-card class="box-card" >
        <div slot="header" class="clearfix">
            <span>评论列表</span>
        </div>
    <el-collapse v-model="activeNames"  @change="handleChange" >
        <div v-for="(comment,index) in article.commentList" @click="getReplyList(index,comment.id)" >
        <el-collapse-item   :name="comment.id" >

            <template slot="title">

                <el-col :span="20">{{comment.detail}}</el-col>
                <el-col :span="4"> <span style="text-align: right">{{comment.name}}&nbsp&nbsp{{comment.createDate}}</span></el-col>

            </template>

            <div v-for="reply in comment.replyList" v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-col :span="19" offset="1">{{reply.detail}}</el-col>
                <el-col :span="4"> <span style="text-align: right">{{reply.name}}&nbsp&nbsp{{reply.date}}</span></el-col>
            </div>


        </el-collapse-item>
        </div>


    </el-collapse>
    </el-card>



</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
           article:{
               id: "1",
               title: "简单爱",
               detail: "说不上为什么我变得很主动，" +
                   "若爱上一个人什么都会值得去做, " +
                   "我想大声宣布对你依依不舍 ，"+
                   "连隔壁邻居都猜到我现在的感受",

               commentList:[],

           },


            comment:{
                detail:"",
                articleId:"",

            },



            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',


            replyList1:[{name:"周杰伦",detail: "哥写的歌真的好听",date:"2019-11-11"}],
            replyList2:[{name:"周杰伦",detail: "哥写的歌真的好听",date:"2019-11-11"}],
            replyList3:[{name:"周杰伦",detail: "哥写的歌真的好听",date:"2019-11-11"}],





        },



        methods: {

            getReplyList(index,id){

                if (this.article.commentList[index].replyList !=null){
                    return;
                } else {

                    this.openFullScreen2(index,id)


                }


            },


            addComment(){
               this.comment.articleId = this.article.id;

               axios.post("/comment/save",this.comment).then((res)=>{
                   alert(res.data.flag)
                   if (res.data.flag === true){
                       this.$message.success("添加成功")
                       //数据的回显
                       //this.findArticleById(this.article.id)
                   } else {
                       this.$message.error("添加失败")
                   }
                   this.dialogFormVisible = false;
                   this.findArticleById(this.article.id)
               })


            },
            findReplyListByCommentId(index,id,loading){


                axios.get("reply/findByCommentId/"+id).then(res=>{
                    if (res.data.flag == true){
                        this.article.commentList[index].replyList = res.data.data;

                        loading.close()
                    }
                })

            },


            openFullScreen2(index,id) {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.findReplyListByCommentId(index,id,loading)

            },

            findArticleById(id) {
                axios.get("/article/findById/"+id).then((res)=>{
                    if (res.data.flag==true){
                        //数据渲染
                         this.article = res.data.data;
                    }

                })

            },







            GetRequest(value) {
        //url例子：www.bicycle.com?id="123456"&Name="bicycle"；
        var url = decodeURI(location.search); //?id="123456"&Name="bicycle";
        var object = {};
        if(url.indexOf("?") != -1)//url中存在问号，也就说有参数。
        {
            var str = url.substr(1);  //得到?后面的字符串
            var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",Name="bicycle"];
            for(var i = 0; i < strs.length; i ++)
            {
                object[strs[i].split("=")[0]]=strs[i].split("=")[1]
            }
        }
        return object[value];
    },

        },

        created(){
            //获取文章的id
             var id = this.GetRequest("id");
             //通过id获取全部的评论列表
            if (id == null || id == undefined){
                window.location.href="/index.html";
            } else {
                this.findArticleById(id);
            }



        }


    })
</script>
</html>

</body>
</html>